<template>
	<view>
		<view class="search-box">
			<uni-search-bar
				placeholder="请输入设备名称搜索"
				bgColor="#fff"
				:cancelButton="false"
				v-model="machineName"
				@confirm="handleSearch"
				@clear="clearSearch"
			/>
		</view>
		<uni-section type="line" title="设备列表" class="body-list">
			<template v-slot:right>
				<view class="a" @click="toSearch">筛选</view>
			</template>
			<uni-list v-if="machineList.length > 0">
				<uni-list-item 
					clickable 
					show-arrow
					v-for="(item, index) in machineList" 
					:key="index"
					:title="`${item.machineNo} | ${item.machineName}`" 
					:note="`缺货率：${item.outStockRate || 0}`" 
					rightText="补货"
					@click="toDrup(event, item)"
				/>
			</uni-list>
			<empty-view v-else></empty-view>
		</uni-section>
	</view>
</template>

<script>
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		
		data() {
			return {
				machineName: "",
				search: {},
				selectedMachine: "",
				machineList: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				pageNo: 1,
				pageSize: 15
			}
		},
		
		onLoad() {
			let data = {
				machineStatus: "",
				outStockRate: 0,
			}
			
			uni.setStorageSync('searchStock', JSON.stringify(data))
		},
		 
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
			
			let search = uni.getStorageSync('searchStock')
			
			if(search) {
				this.search = JSON.parse(search)
			}
			
			this.handleSearch()
		},
		
		onReachBottom() {
			if(this.status === 'more') {
				this.status = 'loading';
				this.getMachineList();
			}
		},
		
		methods: {
			handleSearch() {
				this.pageNo = 1;
				this.machineList = []
				this.getMachineList()
			},
			
			clearSearch() {
				this.machineName = ""
				this.getMachineList()
			},
			
			getMachineList() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/machineList',
					data: {
						merchantId: uni.getStorageSync('mid'),
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						machineName: this.machineName,
						...this.search
					},
					success: res => {
						if(res.data.success) {
							let result = res.data.result
							let dataList = result.records
							let pn = this.pageNo;
							let datas = [];
							let status;
									
							if (pn == 1) {
								datas = dataList;
							} else {
								datas = this.machineList.concat(dataList);
							}
								
							if (result.total > datas.length) {
								pn += 1;
								status = "more"
							} else {
								status = "no-more"
							} 
							
							this.setData({
								status,
								pageNo: pn,
								machineList: datas,
							});
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			toSearch() {
				uni.navigateTo({
					url: "/pages/stock/search"
				})
			},
		
			toDrup(e, record) {
				uni.navigateTo({
					url: `/pages/stock/replenish?machineId=${record.machineId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		background-color: #00aaff;
		height: 120rpx;
	}

	.body-list {
		height: calc(100vh - 120rpx);
	}
	
	.scroll-list {
		height: calc( 100vh - 120rpx - 43px);
	}
</style>